<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        /*white-space: nowrap;*/
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .layui-table td p, .layui-table td .rj-cell {
        padding: 3px 0;
    }
    .layui-table td {
        text-align: left !important;
    }

    .rj-wrap {
        font-size: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
    }
    .cont-left {
        width: 73%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
    }
    .cont-right {
        width: 29%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
      background: #fafafa;
    }
    .cont-tit {
        font-size: 12px;
        padding: 5px 10px;
        color: #bbb;
    }
    .cont-box {
        background: #fff;
        margin: 10px 0;
    }
    .rj-cell {
        display: inline-block;
        padding: 5px 10px;
    }
    .attachimg {
        width: 80px;
        padding: 5px 10px;
        height: 80px;
    }
    .attachimg:hover {
        cursor: pointer;
    }

    .layui-elem-field legend.btns {
        position: absolute;
        right: 20px;
        top: -2px;
    }
</style>

<template>
      <div class="app-container">
<!--        <el-page-header @back="$router.push({path: '/harvest/freightorder'})" content="货运单详情">-->
<!--        </el-page-header>-->
        <div class="rj-wrap">
          <div class="cont-left" id="viewSell" v-loading="loading">
            <div class="cont-box" style="margin-top: 5px;">
              <p class="cont-tit">基础信息</p>
              <div>
                <div class="rj-cell">
                  <label>编号：</label>
                  <span>{{form.code}}</span>
                </div>
                <div class="rj-cell"><label>主体：</label><span>{{form.orgname}}</span></div>
                <div class="rj-cell"><label>部门：</label><span>{{form.department}}</span></div>
                <div class="rj-cell"><label>入库库房：</label><span>{{form.srname}}</span></div>
                <div class="rj-cell"><label>供应商：</label><span>{{form.supplier}}</span></div>
<!--                <div class="rj-cell"><label>数量：</label><span>{{form.totalnum}}</span></div>-->
                <div class="rj-cell"><label>金额：</label><span>{{attachUnit(form.totalamount, '元')}}</span></div>
                <div class="rj-cell"><label>付款状态：</label><span>{{form.payStatusName}}</span></div>
                <div class="rj-cell"><label>状态：</label><span>{{form.statusname}}</span></div>
                <div class="rj-cell"><label>提交人：</label><span>{{form.operator}}</span></div>
                <div class="rj-cell"><label>创建时间：</label><span>{{form.createtime}}</span></div>
                <div class="rj-cell"><label>采购日期：</label><span>{{form.purchdate}}</span></div>
                <div class="rj-cell"><label>备注：</label><span>{{form.remark}}</span></div>
              </div>
            </div>
            <p class="cont-tit">货品明细</p>
            <el-table :data="form.items" :border="true">
              <el-table-column label="产品" align="center" prop="productname" />
              <el-table-column label="规格" align="center" prop="spname" />
              <el-table-column label="价格" align="center" prop="price" >
                <template slot-scope="scope">
                  <span>{{scope.row.price + packUnit(scope.row.stockunit, scope.row.currency)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center" prop="createdate" >
                <template slot-scope="scope">
                  <span>{{scope.row.count}}{{scope.row.stockunit ? scope.row.stockunit : ''}}</span>
                </template>
              </el-table-column>
              <el-table-column label="金额" align="center" prop="amount" >
                <template slot-scope="scope">
                  <span>{{scope.row.amount}}元</span>
                </template>
              </el-table-column>
            </el-table>
            <div v-if="operate">
            <div v-for="node in nodeName">
              <el-button type="primary" style="margin-top: 20px;float: left;margin-left: 20px;margin-right: 20px" @click="nodeTodo">{{node}}</el-button>
            </div>
          </div>
<!--            <el-button type="primary" style="margin-top: 20px;float: left;margin-left: 20px;margin-right: 20px" @click="nodeTodo">入库</el-button>-->
          </div>
          <div class="cont-right">
            <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="id" ></FlowNode>
          </div>
        </div>
      </div>
</template>

<script>
  import FlowNode from '@/components/FlowNode/index'
  import { getPurchasebill } from "@/api/purchase/purchase";
  import {getPendingNode} from "@/api/public";
    let qs = require('qs');
    export default {
        name: 'purchaseinfo',
        data () {
            return {
              loading: true,
              flowid: 26,
              id : '',
              form: {},
              isReady: false,
              nodeName:[],
              operate:false,
              taskid:'',
            }
        },
        components: {
          FlowNode,
        },
      created() {
            let that = this;
            this.id = this.$route.query.id;
            // this.id=this.$router.params.id;
            this.getOrder(this.id);
            this.getNode();
        },
        methods: {
          nodeTodo(){
            this.$router.push({path:'/purchase/purchaseNodeInfo',query:{id:this.id,taskid:this.taskid}})
          },
          getNode(){
            let data={
              flowid:26,
              orderId:this.id
            }
            this.operate=false;
            //土豆暂时不从pc端入库（2023.7.10）
            // getPendingNode(data).then(response=>{
            //   if (response.data){
            //     if (response.data[0].operate=="transferIn26"){
            //       this.operate=true;
            //     }
            //     response.data.map(item=>{
            //       this.nodeName.push(item.name);
            //       this.taskid=item.flowTaskId;
            //     })
            //   }
            // })
          },
          packUnit: function(unit, currency) {
            return unit != undefined && unit != '' ? currency == 2 ? '美元/' + unit : '元/' + unit : '';
          },
          getOrder: function (id) {
            let that = this;
            getPurchasebill(id).then(response => {
                this.loading = false;
                if (response.code == 200) {
                  this.form = response.data;

                  console.log('this.form:', this.form)
                  this.isReady = true;
                } else {
                    this.msgError('系统错误');
                }
              });
          }
        }
    }
</script>
